<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="80px"
      v-show="showSearch"
    >
      <el-form-item label="活动名称" prop="detailName">
        <el-input
          v-model="queryParams.detailName"
          placeholder="请输入活动名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="活动类型" prop="activityType">
        <el-select
          v-model="queryParams.activityType"
          placeholder="请选择活动类型"
          clearable
          size="small"
        >
          <el-option
            v-for="item in dict.type.activity_type"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="客户名称" prop="memberName">
        <el-input
          v-model="queryParams.memberName"
          placeholder="请输入客户名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="所属部门" prop="storeName">
        <el-input
          v-model="queryParams.storeName"
          placeholder="请输入所属部门"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="核销人员" prop="writeOffUser">
        <el-input
          v-model="queryParams.writeOffUser"
          placeholder="请输入核销人员"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          v-hasPermi="['order:writeoff:query']"
          >查询</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleExport"
          v-hasPermi="['order:writeoff:export']"
          >导出</el-button
        >
        <el-button
          type="primary"
          plain
          icon="el-icon-check"
          size="mini"
          :loading="exportLoading"
          @click="handleWriteoff"
          v-hasPermi="['order:writeoff:writeoff']"
          >快速核销</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="list">
      <el-table-column
        min-width="200"
        label="活动名称"
        align="center"
        prop="detailName"
      />
      <el-table-column
        min-width="100"
        label="活动类型"
        align="center"
        prop="activityType"
      >
        <template slot-scope="scope">
          {{ scope.row.activityType | typeFilter(dict.type.activity_type) }}
        </template>
      </el-table-column>
      <el-table-column
        min-width="120"
        label="核销人员"
        align="center"
        prop="writeOffUser"
      />
      <el-table-column
        min-width="120"
        label="核销时间"
        align="center"
        prop="writeOffTime"
      />
      <el-table-column
        min-width="100"
        label="支付金额"
        align="center"
        prop="payPrice"
      />
      <el-table-column
        min-width="160"
        label="核销门店名称"
        align="center"
        prop="storeName"
        show-overflow-tooltip
      />
      <el-table-column
        min-width="160"
        label="客户名称"
        align="center"
        prop="memberName"
      />
      <el-table-column
        min-width="160"
        label="用户手机号"
        align="center"
        prop="memberPhone"
      />
      <el-table-column
        min-width="160"
        label="创建时间"
        align="center"
        prop="createTime"
      />
      <el-table-column
        min-width="120"
        label="创建人"
        align="center"
        prop="createBy"
        sortable
      />
      <el-table-column
        min-width="160"
        label="修改时间"
        align="center"
        prop="updateTime"
      />
      <el-table-column
        min-width="160"
        label="修改人"
        align="center"
        prop="updateBy"
      />
      <el-table-column
        min-width="140"
        label="操作"
        align="center"
        fixed="right"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handDetail(scope.row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 添加或修改参数配置对话框 -->
    <el-dialog
      :title="writeOff.title"
      :visible.sync="writeOff.open"
      width="50%"
      append-to-body
      :before-close="cancel"
    >
      <el-row :gutter="15">
        <el-form
          :model="writeOff.queryParams"
          ref="writeOffQueryForm"
          label-width="30px"
          :inline="false"
        >
          <el-col :span="14">
            <el-form-item label="" prop="id">
              <el-input
                v-model.trim="writeOff.queryParams.id"
                placeholder="请输入核销码"
                clearable
                size="small"
                @keyup.enter.native="searchHandleQuery"
                :style="{ width: 'calc(100% - 100px)', marginRight: '15px' }"
              />
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="searchHandleQuery"
                >核销</el-button
              >
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <el-row :gutter="15" v-if="activityShow">
        <el-form
          :model="formData"
          ref="formData"
          :rules="rules"
          :inline="false"
          label-width="100px"
        >
          <el-col :span="12">
            <el-form-item label="活动类型" prop="activityType">
              <el-select
                v-model.number="formData.activityType"
                :disabled="disabled"
                placeholder="请选择活动类型"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="item in dict.type.activity_type"
                  :key="item.value"
                  :label="item.label"
                  :value="parseInt(item.value)"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="活动名称" prop="activityName">
              <el-input
                v-model.trim="formData.activityName"
                :disabled="disabled"
                placeholder="请输入活动名称"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="formData.activityType == 1">
            <el-form-item label="支付金额" prop="amount">
              <el-input
                v-model.number="formData.amount"
                :disabled="disabled"
                placeholder="请输入支付金额"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="活动时间" prop="time">
              <el-input
                v-model="formData.time"
                :disabled="disabled"
                placeholder="请输入商品名称"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" :style="{ marginTop: '15px' }">
            <el-row
              v-for="(item, index) in formData.serviceInfoList"
              :key="index"
            >
              <el-col :span="12">
                <el-form-item label="商品名称">
                  <el-input
                    v-model="item['shoppingServiceName']"
                    :disabled="disabled"
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="可使用数量">
                  <el-input
                    v-model.trim="item['remainingNumber']"
                    :disabled="disabled"
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="核销数量"
                  :prop="'serviceInfoList.' + index + '.number'"
                >
                  <el-input
                    v-model.number="formData.serviceInfoList[index].number"
                    placeholder="请输入核销数量"
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-form>
      </el-row>
      <div
        slot="footer"
        class="dialog-footer"
        :style="{ textAlign: 'center' }"
        v-if="activityShow"
      >
        <el-button type="primary" @click="submitForm">确定核销</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getWriteOffList,
  exportWriteOffList,
  writeOff,
} from '@/api/order/writeoff'

import { getActivityById } from '@/api/order/activity'

export default {
  name: 'OrderActive',
  dicts: ['activity_type'],
  data() {
    return {
      //核销数据
      writeOff: {
        open: false,
        title: '快速核销',
        queryParams: {
          id: '',
        },
      },
      activityShow: false,
      formData: {
        activityOrderNo: '',
        activityType: null,
        activityName: '',
        amount: '',
        time: '',
        serviceInfoList: [],
      },
      rules: {
        serviceInfoList: [
          {
            number: [
              {
                required: true,
                message: '请输入核销数量',
                trigger: 'blur',
              },
              {
                required: true,
                pattern: /^([1-9]\d*)$/,
                message: '只能输入正整数',
                trigger: 'blur',
              },
            ],
          },
        ],
      },
      disabled: true,
      showSearch: true,
      // 表格遮罩
      loading: false,
      // 表格数据
      list: [],
      total: 1,
      // 导出遮罩层
      exportLoading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        detailName: '',
        activityType: null,
        memberName: '',
        storeName: '',
        writeOffUser: '',
      },
    }
  },
  filters: {
    typeFilter(val, type) {
      if (val === null) return null
      let data = type.filter((item) => {
        return val == item.value
      })
      if (data.length) {
        return data[0].label
      } else {
        return val
      }
    },
  },
  created() {
    this.getList()
  },
  methods: {
    handleWriteoff() {
      this.writeOff.open = true
    },
    //查询核销数据
    searchHandleQuery() {
      if (this.writeOff.queryParams.id === '') {
        this.$message.success('请输入核销码！')
        return false
      }
      getActivityById(this.writeOff.queryParams).then((res) => {
        this.activityShow = true
        this.formData = res.data
        this.formData.serviceInfoList = res.data.serviceInfoList.map((item) => {
          item.number = item.remainingNumber == 1 ? 1 : null
          return item
        })
        console.log(this.formData.serviceInfoList)
        this.formData.time =
          res.data.activityStartTime + ' - ' + res.data.activityEndTime
      })
    },
    /** 查询租户管理列表 */
    getList() {
      this.loading = true
      getWriteOffList(this.queryParams).then((response) => {
        this.list = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    /** 详情按钮操作 */
    handDetail(row) {
      this.$router.push({
        path: '/order/writeoff/detail/' + row.id,
      })
    },
    // 提交按钮
    submitForm() {
      console.log(this.formData)
      let serviceInfoList = []
      this.formData.serviceInfoList.map((item) => {
        serviceInfoList.push({
          serviceNo: '' + item.serviceNo,
          number: item.number,
        })
      })
      let query = {
        orderNo: this.formData.activityOrderNo,
        couponId: '',
        serviceInfoList: serviceInfoList,
      }
      this.$refs['formData'].validate((valid) => {
        if (!valid) {
          this.$message.error('验证不通过，请检查输入')
          return
        } else {
          writeOff(query).then((res) => {
            this.$message.success(res.msg)
            this.cancel()
          })
        }
      })
    },
    // 取消按钮
    cancel() {
      this.resetForm('writeOffQueryForm')
      this.resetForm('formData')
      this.activityShow = false
      this.writeOff.open = false
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = {
        detailName: this.queryParams.detailName,
        typeName: this.queryParams.typeName,
        memberName: this.queryParams.memberName,
        storeName: this.queryParams.storeName,
        writeOffUser: this.queryParams.writeOffUser,
      }
      this.$modal
        .confirm('是否确认导出活动订单核销数据项？')
        .then(() => {
          this.exportLoading = true
          exportWriteOffList(queryParams)
            .then((res) => {
              this.$download.name(res.msg)
              this.exportLoading = false
            })
            .catch((err) => {
              this.exportLoading = false
            })
        })
        .catch(() => {})
    },
  },
}
</script>

